<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useUser } from "@/stores/useUser";
import { initSocket } from "@/services/socket";
import { authRegister } from "@/apis/yz";

const router = useRouter();
const userStore = useUser();
const params = reactive({ username: "" });
const register = async () => {
	await authRegister(params);
	alert("注册成功");
};
const submit = async () => {
	await userStore.login(params);
	initSocket();
	alert("登录成功");
	router.replace("/");
};
</script>

<template>
	<div class="login">
		<form class="form" @submit.prevent="submit()">
			<article class="form-item">
				<label>用户名</label>
				<div class="control">
					<label class="input">
						<input type="text" v-model="params.username" placeholder="用户名" />
					</label>
				</div>
			</article>
			<article class="form-item">
				<div class="control">
					<label class="button">
						<button class="primary" type="button" @click="register()">注册</button>
					</label>
				</div>
			</article>
			<article class="form-item">
				<div class="control">
					<label class="button">
						<button class="primary">登录</button>
					</label>
				</div>
			</article>
		</form>
	</div>
</template>

<style scoped lang="scss">
@use "@/styles/form";
</style>
